<template>
  <div>
    <el-dialog
      title="管理员信息"
      :visible.sync="visible"
      width="50%"
      :before-close="cancel"
      @open="open"
    >
      <div class="dialog-content">
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline" />
              头像
            </template>
            <el-image
              style="width: 45px; height: 45px"
              :src="manageInfo.avatar"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              账号编号
            </template>
            {{ manageInfo.id }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              用户名
            </template>
            {{ manageInfo.username }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              手机号
            </template>
            {{ manageInfo.mobilePhone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets" />
              组织名称
            </template>
            {{ manageInfo.organizeName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              组织描述
            </template>
            {{ manageInfo.organizeDescription }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              业务范畴
            </template>
            {{ manageInfo.business }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              业务描述
            </template>
            {{ manageInfo.description }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // eslint-disable-next-line vue/require-default-prop
    info: {
      type: Object,
    },
  },
  data() {
    return {
      manageInfo: {
        avatar: "",
        id: "",
        username: "",
        mobilePhone: "",
        organizeName: "",
        organizeDescription: "",
        business: "",
        description: "",
      },
    };
  },
  methods: {
    open() {
      console.log(this.info.productTypes);
      let businessArr = this.info.productTypes.map((item) => {
        return item.productType;
      });
      this.manageInfo = this.info;
      this.manageInfo.organizeName = this.info.organization.organizeName;
      this.manageInfo.organizeDescription = this.info.organization.description;
      this.manageInfo.business= businessArr.toString();
    },
    cancel() {
      this.initManagerInfo();
      this.$emit("cancel");
    },
    initManagerInfo() {
      this.manageInfo = {
        avatar: "",
        id: "",
        username: "",
        mobilePhone: "",
        organizeName: "",
        organizeDescription: "",
        business: "",
        description: "",
      };
    },
  },
};
</script>

<style>
</style>
